<template>
	<view class="qrcode">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="main" v-if="isLogin">
			<view class="qrcode-img">
				<image :src="imgUrl" mode="aspectFill"></image>
			</view>
			<view class="desc">
				<view class="item">会员ID:{{ memberInfo.id }}</view>
				<view class="item">我的昵称:{{ memberInfo.nickname }}</view>
				<view class="item">电话:{{ memberInfo.username }}</view>
				<view class="item">推客等级:{{ memberInfo.agent_level_name }}</view>
				<view class="item">招商等级:{{ memberInfo.brand_level_name }}</view>
				<view class="item">运营等级:{{ memberInfo.operation_level_name }}</view>
			</view>
		</view>

		<view class="share">分享好友</view>

		<view class="main" v-if="!isLogin" style="text-align: center;margin-top: 30rpx;">
			未登录状态，请<text style="padding: 0 10rpx; color: red;" @click="util.toLogin()">[登录]</text>后查看
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '推广码',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isLogin: util.getToken(),
		memberInfo: {},
		imgUrl: '',
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getMemberInfo();
		createCodeImg();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getMemberInfo() {
		if (state.isLogin) {
			request.get('auth/memberInfo').then(res => {
				console.log('会员信息', res);
			})
		}
	}

	function createCodeImg() {
		if (state.isLogin) {
			request.get('userinfo/createCodeImg').then(res => {
				console.log('会员推广码', res);
			})
			/* request.get('agent.agent/getMemberShareCode').then(res => {
				console.log('会员推广码', res);
			})
			request.get('agent.agent/getAgentShareCode').then(res => {
				console.log('代理推广码', res);
			}) */
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isLogin,
		memberInfo,
		imgUrl,
	} = toRefs(state);
</script>

<style lang="scss">
	.qrcode {
		width: 100%;
		height: 96vh;
		padding: 20vh 0 0 0;
		background: #fff url($web_url+'/static/images/qrcode-bg2.jpg') no-repeat top;
		background-size: 100% 100%;
		text-align: center;


		.main {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 260rpx auto 0;
			width: 500rpx;
			height: 700rpx;
			background: #fff url($web_url+'/static/images/qrcode-bg3.png') no-repeat top;
			background-size: 100% 100%;
			border-radius: 20rpx;

			.qrcode-img {
				width: 260rpx;
				height: 260rpx;
				margin: 0rpx 16rpx 0 0;
				background: #fff;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}

				img {
					width: 100%;
					height: 100%;
				}
			}

			.desc {
				width: 400rpx;
				padding: 20rpx 50rpx 0;
				text-align: center;

				.item {
					font-size: 27rpx;
					color: #313131;
				}
			}
		}

		.share {
			width: 60%;
			height: 80rpx;
			margin: 30rpx auto 0;
			border-radius: 40rpx;
			background: linear-gradient(to right, #a1346b, #d7304a);
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>